<template>
    <div>
        <give-up></give-up>
        <!--<div class="item" v-if="$root.resultObj.productUrl">
            <div class="content taokoul">
                <p>本商品的淘口令：</p>
                <input type="text" v-model="$root.resultObj.productUrl"><span v-clipboard:copy="$root.resultObj.productUrl" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</span>
            </div>
        </div>-->
        <div class="item" v-if="$root.resultObj.zhaoChaArray">
            <my-title title="请浏览详情页，补全下面文字" :isBorder="false"></my-title>
            <div class="detail content" v-html="$root.elemString" ref="detail">
            </div>
        </div>
        <div class="item" v-if="$root.resultObj.goodAppraise">
            <my-title title="浏览评价页，找到这个评价的日期" :isBorder="false"></my-title>
            <div class="content comment-date">
                <p>{{ $root.resultObj.goodAppraise }}</p>
                <span @click="openPicker">{{ selectVal }}</span>
                <mt-datetime-picker
                v-model="dateVal"
                ref="picker"
                type="date"
                year-format="{value} 年"
                month-format="{value} 月"
                date-format="{value} 日"
                @confirm="handleConfirm">
                </mt-datetime-picker>
            </div>
        </div>

        <!--<div class="item">
            <my-title title="逛1个同店铺商品" :isBorder="false"></my-title>
            <div class="taokouling content">
                <p>浏览任意1件同店铺商品，复制淘口令到下方</p>
                <input type="text" placeholder="同店铺商品淘口令" v-model="$root.resultObj.personalSameStoreReadUrl">
            </div>
        </div>
        <div class="item">

        </div>-->

      <!-- 同店铺浏览-->
        <div class="item" v-if="$root.resultObj && $root.resultObj.personalSameStoreRead">
          <my-title title="本店铺商品浏览"></my-title>
          <div class="goods content" ref="personalSameStoreReadUrl">
            <p>请在当前店铺中，浏览{{ $root.resultObj.personalSameStoreRead }}个商品，并复制商品的淘口令地址！</p>
            <div v-for="(item, index) in $root.personalSameStoreReadArray" :key="index">
              <input type="text" placeholder="商品分享的淘口令地址" v-model="$root.personalSameStoreReadArray[index]">
            </div>
          </div>
        </div>
        <div class="item" v-if="$root.resultObj.personalFollow">
            <my-title title="店铺操作" :isBorder="false"></my-title>
            <mt-checklist
            v-model="checkValue"
            :options="$root.personalFollow">
            </mt-checklist>
            <mt-checklist v-if="$root.resultObj.personalDeepRead"
                          v-model="checkValue"
                          :options="$root.personalDeepRead">

            </mt-checklist>
        </div>
        <my-btn @next="next"></my-btn>
    </div>
</template>

<script>
import MyTitle from 'components/my-title.vue'
import GiveUp from 'components/give-up.vue'
import { DatetimePicker } from 'mint-ui'
import Vue from 'vue'
Vue.component(DatetimePicker.name, DatetimePicker)
import { Checklist } from 'mint-ui'
Vue.component(Checklist.name, Checklist)

import { formatDate } from 'common/utils.js'

import { Toast, MessageBox } from 'mint-ui'

import MyBtn from 'components/my-btn.vue'

export default {
    data() {
        return {
            taokoul: '复制这条信息',
            dateVal: '',
            checkValue: [],
            selectVal: ''
        }
    },
    components: {
        MyTitle,
        GiveUp,
        MyBtn
    },
    created() {
    },
    methods: {
        openPicker() {
            // if (this.$root.resultObj.goodAppraiseDate) {
            //     this.dateVal = this.$root.resultObj.goodAppraiseDate
            // } else {
                this.dateVal = new Date();
            // }
            this.$refs.picker.open();
        },
        handleConfirm(date) {
            this.$root.resultObj.goodAppraiseDate = formatDate(date, 'yyyy-MM-dd')
            this.selectVal = formatDate(date, 'yyyy-MM-dd')
        },
        next() {
            let zhaochaArray = this.$root.resultObj.zhaoChaArray;
            if (this.$root.resultObj.zhaoChaArray) {
                const inputArr = this.$refs.detail.getElementsByTagName('input')
                for(var i = 0; i < inputArr.length; i++) {
                    if (!inputArr[i].value) {
                        Toast({
                            message: '请将详情信息填写完整',
                            duration: 2000
                        })
                        return
                    }
                  zhaochaArray = zhaochaArray.replace('*', inputArr[i].value)
                }
            }
             console.log("zhaochaArray="+zhaochaArray+",this.$root.resultObj.zhaoChaArrayStr="+this.$root.resultObj.zhaoChaArrayStr);
            if(zhaochaArray != this.$root.resultObj.zhaoChaArrayStr){
              Toast({
                message: '找茬信息填写不正确',
                duration: 2000
              })
              return
            }
            //将找茬信息赋值给对象
            this.$root.resultObj.zhaoChaArray = zhaochaArray;
            console.log("this.$root.resultObj.zhaoChaArray="+this.$root.resultObj.zhaoChaArray);
            if (!this.$root.resultObj.goodAppraiseDate && this.$root.resultObj.goodAppraise) {
                Toast({
                    message: '请选择评价日期',
                    duration: 2000
                })
                return
            }
            // if (!this.$root.resultObj.personalSameStoreReadUrl) {
            //     Toast({
            //         message: '请填写同店铺商品淘口令',
            //         duration: 2000
            //     })
            //     return
            // }
          //同店铺宝贝浏览
          if (this.$root.resultObj.personalSameStoreRead) {
            const inputArr = this.$refs.personalSameStoreReadUrl.getElementsByTagName('input')
            let arr = []
            for (var i = 0; i < inputArr.length; i++) {
              if (!inputArr[i].value) {
                Toast({
                  message: '请将本店铺浏览信息填写完整',
                  duration: 2000
                })
                return
              }
              if (inputArr[i].value.length < 15) {
                Toast({
                  message: '请填写正确的店铺宝贝地址',
                  duration: 2000
                })
                return
              }
              arr.push(inputArr[i].value)
            }
            this.$root.resultObj.personalSameStoreReadUrl = arr.join('|')
          }
            this.$router.push({
                name: 'page3'
            })
        },
        onCopy(e) {
            Toast({
                message: '复制成功',
                duration: 2000
            });
            console.log(e.text)
        },
        onError() {
            MessageBox('提示', '复制失败，请手动复制')
        }
    }
}
</script>

<style lang="scss">
.detail {
    div {
        font-size: 1.4rem;
        margin-top: 1rem;
        line-height: 4rem;
        &:first-child {
            margin-top: 0;
        }

        input {
            width: 3.5rem;
            height: 2.5rem;
            font-size: 1.4rem;
            border: 1px solid #ccc;
            margin: 0 0.5rem;
            padding: 0.5rem;
            border-radius: 0.5rem;
        }
    }
}
</style>


<style lang="scss" scoped>


.comment-date {
    p {
        font-size: 1.4rem;
    }
    span {
        font-size: 1.4rem;
        width: 100%;
        display: inline-block;
        height: 4rem;
        border: 1px solid #ccc;
        margin-top: 1rem;
        line-height: 4rem;
        padding: 0 1rem;
        border-radius: 0.8rem;
    }
}
.taokouling {
    p {
        margin-bottom: 1rem;
        color: #ccc;
        font-size: 1.4rem;
    }
    input {
        width: 100%;
        border: 1px solid #ccc;
        font-size: 1.4rem;
        padding: 1rem;
        border-radius: 1rem;

        &::-webkit-input-placeholder { /* WebKit, Blink, Edge */
            color: #ccc;
        }
        &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            color: #ccc;
        }
        &::-moz-placeholder { /* Mozilla Firefox 19+ */
            color: #ccc;
        }
        &:-ms-input-placeholder { /* Internet Explorer 10-11 */
            color: #ccc;
        }
    }
}
.goods {
  p {
    font-size: 1.4rem;
    margin-bottom: 1rem;
    color: #ccc;
  }

  & > div {
    padding: 0.5rem 0.3rem;
    border: 1px dashed #8fdd6f;

    input {
      width: 100%;
      border: 1px solid #ccc;
      font-size: 1.4rem;
      padding: 1rem;
      border-radius: 1rem;

      &::-webkit-input-placeholder { /* WebKit, Blink, Edge */
        color: #ccc;
      }

      &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        color: #ccc;
      }

      &::-moz-placeholder { /* Mozilla Firefox 19+ */
        color: #ccc;
      }

      &:-ms-input-placeholder { /* Internet Explorer 10-11 */
        color: #ccc;
      }
    }
  }
}
.item /deep/ .mint-checkbox-input:checked + .mint-checkbox-core {
    background-color: #a1ef82;
    border-color: #a1ef82;
}
</style>
